<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        section {
            display: flex;
            background-color: #ddd;
            width: 500px;
            height: 300px;
            outline: 5px solid yellow;
        }

        .left-side {
            background-color: red;
            flex: 0 0.1 150px
        }

        .content {
            flex: 0 0.2 200px;
        }

        .right-side {
            background-color: blue;
            flex: 0 0.3 350px;
        }

        /*
          当子项目的flex-shrink总和大于<1时，与flex-grow的计算方式并不相同

          flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量。

          每个元素具体收缩多少，还有另一个重要因素，即它本身的宽度。

          所以每个项目的权重为：宽度*flex-shrink
          left：150 * 0.1 = 15
          content: 200 * 0.2 = 40
          right: 350 * 0.3 = 105
          总权重：sum = 15 + 40 + 105 = 160;

          溢出宽度 = 500px - 150px - 200px - 350px =  -200px
          因为flex-shrink总和大于<1时，因此并不是子项目要完全收缩200px 而是 200px * （0.1+0.2+0.3） = 120px，即收缩60%

          各个项目需要的收缩的宽度： = 溢出宽度 *（项目权重 / 总权重）
          left：120 *(15/160) = 11.25px
          content: 120 * (40/160)= 30px
          right: 120 * (105/160) = 78.75px

          最终宽度：
          left：150 -  11.25 = 138.75px
          content：200 - 30 = 170px
          right：350 - 78.75 = 271.25px


           总结：
           虽然上面的公式看起来很复杂，其实计算过程还是比较简单的：
           1、如果所有元素的 flex-grow/shrink 之和大于等于 1，则所有子元素的尺寸一定会被调整到适应父元素的尺寸（在不考虑 max/min-width/height 的前提下），
           2、而如果 flex-grow/shrink 之和小于 1，则实际分配或收缩的宽度将是溢出宽度*flex-grow/shrink 之和后再与权重比例计算，（这意味着剩余空间不会完全分配给子项目或子项目不会完全收缩）
           3、grow 时的每个元素的权重即为元素的 flex-grow 的值；shrink 时每个元素的权重则为元素 flex-shrink 乘以 width 后的值。


            下面列一下在 flex 布局中容易忽略的几个问题：

            flex 上下文中垂直 margin 不会合并
            flex 主轴方面上子元素的 margin 如果设置为 auto，其该方向上的 margin 是会尽量大的，也就是尽量压缩内容的高度，可以利用这个特性来做垂直水平居中（与align-items：center有相同效果）
            flex-basis 与 width/height 同时使用时，优先使用flex-basis
        */
    </style>
</head>
<body>
<section>
    <div class="left-side">left-side</div>
    <div class="content">content</div>
    <div class="right-side">right-side</div>
</section>
</body>
</html>
